<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <!-- 
    webp只兼容chrome浏览器
    
    有相关的解决方案

    一般网站如果想让图片加载更快
    会将图片上传到相关的云服务上

    后台上传后，云服务器会返回一个图片地址。后台存到数据库即可

    当页面渲染对应的地址后，对应云服务会根据当前请求的浏览器的信息，判断应该返回webp还是原图

    又拍云 七牛云 这些都是老牌的图片处理厂商

    正常布局式不考虑webp。这是图片优化时考虑的内容。一般由后台解决
   -->
  <img src="http://fsagdsg.test.upcdn.net/1.png" alt="">
</body>
</html>